<template>
  <div
    class="
      mt-5
      flex-shrink flex flex-grow-0
      bg-gray-300
      shadow-md
      rounded
      overflow-auto
    "
  >
    <table class="m-0 w-full" style="">
      <colgroup>
        <!-- 这里可以针对每列做一些属性设置，例如设置宽度，这个我还真不知道，也许曾经看过但忘了 -->
        <col width="10%" />
        <col width="35%" />
        <col width="15%" />
        <col width="10%" />
        <col width="30%" />
      </colgroup>

      <thead>
        <tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
          <th class="py-3 text-center">ID</th>
          <th class="py-3 text-center">NAME</th>
          <th class="py-3 text-center">VERSION</th>
          <th class="py-3 text-center">STATUS</th>
          <th class="py-3 text-center">ACTIONS</th>
        </tr>
      </thead>
      <tbody class="text-gray-600 text-sm font-light">
        <tr
          class="text-center border-b border-gray-200"
          :class="[index % 2 === 0 ? 'bg-gray-50' : 'bg-white']"
          v-for="(item,index) in ModStruct"
          :key="item._Path"
        >
          <td class="py-3 whitespace-normal">{{ index + 1 }}</td>
          <td class="py-3 whitespace-normal break-all">{{ item._Name }}</td>
          <td class="py-3 whitespace-normal break-all">1.5</td>
          <td class="py-3 whitespace-normal break-all">
            <span
              class="w-6 h-6 bg-gray-300 inline-block shadow-lg-gray"
            ></span>
          </td>
          <td class="py-3 whitespace-normal break-all  justify-evenly text-center">
            <eye-icon class="inline-block mx-5 h-5 w-5  text-blue-500 transition duration-300 ease-in-out hover:text-blue-700 transform hover:-translate-y-1 hover:scale-110" @click="viewInFolder"></eye-icon>
            <code-icon class="inline-block mx-5 h-5 w-5  text-blue-500 transition duration-300 ease-in-out hover:text-blue-700 transform hover:-translate-y-1 hover:scale-110" @click="configeMod"></code-icon>
            <trash-icon class="inline-block mx-5 h-5 w-5  text-blue-500 transition duration-300 ease-in-out hover:text-blue-700 transform hover:-translate-y-1 hover:scale-110" @click='deleteMod'></trash-icon>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
// import { , } from "vue";
import { TrashIcon, CodeIcon, EyeIcon } from "@heroicons/vue/outline";

export default {
  name: "Tables",
  props: ["ModStruct"],
  components: {
    TrashIcon,
    CodeIcon,
    EyeIcon,
  },
  setup() {

    let viewInFolder = () => {

    }
    let configeMod = () => {}

    let deleteMod = () => {console.log("234234");}
    return {
      deleteMod,
      viewInFolder,
      configeMod
    };
  },
};
</script>

<style>
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #c8c8c8;
}
</style>